<template>
  <transition name="slide">
    <music-list :title="title" :bg-image="bgImage" :songs="songs"/>
  </transition>
</template>

<script>
  import MusicList from '@/components/music-list/music-list'
  import {mapGetters} from "vuex";
  // import {getSongList} from "api/recommend";
  import {ERR_OK} from "api/config";
  import {getSongList} from "../../api/disc";
  import {createdSong} from "common/js/song";

  export default {
      name: "disc",
      data() {
        return {
          songs: []
        }
      },
      computed: {
        title() {
          return this.disc.dissname;
        },
        bgImage() {
          return this.disc.imgurl;
        },
        ...mapGetters([
          'disc',
          'singer'
        ])
      },
      created() {
        this._getSongList();
      },
      methods: {
        _getSongList() {
          if (!this.disc.dissid) {
            this.$router.push("/recommend");
            return;
          }
          getSongList(this.disc.dissid).then(res => {
            if (res.code === ERR_OK) {
              console.log(res.cdlist[0].songlist)
              this.songs = this._normalizeSongList(res.cdlist[0].songlist);
            }
          })
        },
        _normalizeSongList(list) {
          let ret = [];
          list.forEach((musicData) => {
            if (musicData.songid && musicData.albumid) {
              ret.push(createdSong(musicData))
            }
          })
          return ret;
        }
      },
      components: {
        MusicList
      }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .slide-enter-active, .slide-leave-active
    transition: all 0.3s

  .slide-enter, .slide-leave-to
    transform: translate3d(100%, 0, 0)
</style>
